<template>
  <!-- 精选池.vue -->
  <div class="selected-pool">
    <empty-pool v-if="isEmpty"></empty-pool>
    <div class="list" v-else>
      <div v-if="showLoading" class="box-center">
        <atom-loading />
      </div>
      <div class="selected-pool" v-else>
        <!-- 日期 -->
        <div :class="`calendar ${renewalDate.length ? 'has-renewal' : ''}`" v-if="showDatePick">
          <atom-sticky offset-top="12.8vw">
            <atom-calendar-tab
              v-model="defaultDate"
              :min-date="minDate"
              :max-date="maxDate"
              :weekFormatter="weekFormatter"
              :filter="filterDate"
              @click-calendar="show"
            >
            </atom-calendar-tab>
          </atom-sticky>
          <atom-calendar
            v-model="showCalendar"
            :min-date="minDate"
            :max-date="maxDate"
            :default-date="defaultDate"
            :formatter="formatter"
            :effect-date-rule="filterCalendar"
            @confirm="confirm"
          >
          </atom-calendar>
        </div>
        <holding-list
          :stockList="stockList"
          :cardList="cardList"
          offsetTool="29.33vw"
          offsetList="42.66vw"
          @modeChange="onModeChange"
        ></holding-list>
        <div @click="showHolding" class="btn" v-if="dataList.length">持仓记录<svg-icon icon="arrow-right"></svg-icon></div>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from '@/views/detail/mixins';
import { BASE_URL } from '@/config/pool';
import HoldingList from '@/components/detail/HoldingList.vue';
import EmptyPool from '@/components/detail/EmptyPool.vue';

export default {
  mixins: [mixins],
  components: {
    HoldingList,
    EmptyPool,
  },
  computed: {
    isEmpty() {
      return !this.dataList.length && !this.showLoading;
    },
  },
  data() {
    return {
      // 列表卡片模式，默认列表
      currentMode: 0
    };
  },
  async created() {
    const gpcId = window.getParam('gpc_id');
    if (gpcId) {
      this.showLoading = true;
      const list = await this.getSelectedPool(gpcId);
      if (!list.length) {
        this.dataList = [];
        this.showLoading = false;
        return;
      }
      await this.handleDataList(list);
      await this.getSignalList();
      this.getValidDate();
      this.showLoading = false;
    } else {
      this.dataList = [];
    }
  },
  methods: {
    // 列表卡片模式切换
    onModeChange(mode) {
      this.currentMode = mode;
    },
    showHolding() {
      location.href = `${BASE_URL}holding?gpc_id=${window.getParam('gpc_id')}&product=${window.getParam('product')}&mode=${this.currentMode}`;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.renewal-day .atom-calendar__top-info {
  color: #ff2436;
}
.has-renewal /deep/.atom-calendar-tab__icon-wrapper {
  position: relative;
  &::before {
    position: absolute;
    .bg-mixins;
    content: '';
    background-image: url('../../assets/images/renewal.png');
    width: 26px;
    height: 14px;
    z-index: 11;
    right: -10px;
  }
}
.list {
  min-height: 310px;
  height: auto;
  // overflow-x: hidden;
  position: relative;
}

.box-center {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.atom-calendar-tab {
  width: 100%;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 18px;
  color: var(--text-3);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
</style>
